<template>
	<view class="page">
		<mescroll-uni ref="mescrollRef" height="100%" top="0" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
		 @up="upCallback">
			<view class="my_info">
				<view class="my_info_item">
					<view class="my_info_thumb">
						<image src="/static/img/1.jpg" mode="widthFix"></image>
					</view>
					<view class="my_info_text">
						<view class="title clearfix"><text class="fl">李师傅</text><text class="fr">2020-06-25</text></view>
						<view class="content">您好，已接单您的订单，会尽快…</view>
					</view>
					<view class="status"></view>
				</view>
				<view class="my_info_item">
					<view class="my_info_thumb">
						<image src="/static/img/1.jpg" mode="widthFix"></image>
					</view>
					<view class="my_info_text">
						<view class="title clearfix"><text class="fl">李师傅</text><text class="fr">2020-06-25</text></view>
						<view class="content">您好，已接单您的订单，会尽快…</view>
					</view>
					<view class="status"></view>
				</view>
				<view class="my_info_item">
					<view class="my_info_thumb">
						<image src="/static/img/1.jpg" mode="widthFix"></image>
					</view>
					<view class="my_info_text">
						<view class="title clearfix"><text class="fl">李师傅</text><text class="fr">2020-06-25</text></view>
						<view class="content">您好，已接单您的订单，会尽快…</view>
					</view>
					<view class="status"></view>
				</view>
				<view class="my_info_item">
					<view class="my_info_thumb">
						<image src="/static/img/1.jpg" mode="widthFix"></image>
					</view>
					<view class="my_info_text">
						<view class="title clearfix"><text class="fl">李师傅</text><text class="fr">2020-06-25</text></view>
						<view class="content">您好，已接单您的订单，会尽快…</view>
					</view>
					<view class="status"></view>
				</view>
				<view class="my_info_item">
					<view class="my_info_thumb">
						<image src="/static/img/1.jpg" mode="widthFix"></image>
					</view>
					<view class="my_info_text">
						<view class="title clearfix"><text class="fl">李师傅</text><text class="fr">2020-06-25</text></view>
						<view class="content">您好，已接单您的订单，会尽快…</view>
					</view>
					<view class="status"></view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: true, //是否在初始化后,自动执行downCallback; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 30, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					}
				}
			}
		},
		methods: {
			downCallback() {
				//联网加载数据
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				// let params = {
				// 	page_size: page.size,
				// 	page: page.num,
				// 	random_str: this.$dokey.getRandom(),
				// 	timestamp: this.$dokey.getTime(),
				// 	method: 'website.mould.log.list',
				// 	sign: this.$md5(this.$dokey.secretdate('website.mould.log.list'))
				// }
				// requestAll(params).then(resp => {
				// 	if (resp.code == 1) {
				// 		let data = resp.response_data
				// 		if (page.num == 1) this.dataArray = []; //如果是第一页需手动制空列表
				// 		this.dataArray = this.dataArray.concat(data.list); //追加新数据
				// 		if (page.num == 1) this.previewList = []
				// 		this.previewList = this.previewList.concat(data.list);
				// 		this.pageTotal = data.total_page
				// 		this.mescroll.endByPage(data.list.length, this.pageTotal);
				// 	}
				// }).catch(() => {
				// 	//联网失败, 结束加载
				// 	this.mescroll.endErr();
				// })
			},
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.page {
		.my_info {
			padding: 33rpx;

			.my_info_item {
				position: relative;
				display: flex;
				padding-bottom: 33rpx;
				margin-bottom: 33rpx;
				border-bottom: 1px solid #E2E2E2;

				.my_info_thumb {
					flex: 0 0 100rpx;
					width: 100rpx;
					height: 100rpx;
					margin-right: 33rpx;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						min-height: 100%;
					}
				}

				.my_info_text {
					flex: 1;

					.title {
						line-height: 180%;

						.fl {
							width: 300rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 32rpx;
							color: #565656;
						}

						.fr {
							font-size: 26rpx;
							color: #B3B3B3;
						}
					}

					.content {
						width: 375rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 26rpx;
						color: #B3B3B3;
					}
				}

				.status {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 25rpx;
					height: 25rpx;
					border-radius: 50%;
					background: #FE6A6A;
				}
			}
		}
	}
</style>
